<template>
  <div>
    <el-dialog title="新增菜单" class="dialogAdd" width="600px" :visible.sync="dialogAddgsVisible">
      <el-form
        :model="addForm"
        ref="addForm"
        style="margin-right: 20px;"
        label-position="right"
        label-width="110px"
      >
        <el-form-item label="菜单名称:" prop="creditCode">
          <el-input placeholder="请输入菜单名称" v-model="addForm.description"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限:" prop="creditCode">
          <el-input placeholder="请输入菜单权限" v-model="addForm.permission"></el-input>
        </el-form-item>
        <el-form-item label="图标:" prop="address">
          <el-input placeholder="请输入图标" v-model="addForm.icon"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addPerm">确 定</el-button>
      </div>
    </el-dialog>

    <tree-table
      :height="tableHeight"
      :data="permList"
      :columns="columns"
      :root_value="'0'"
      :primary_fld="'permissionId'"
      :expand-all="expandAll"
      :parent_fld="'parentId'"
      :select_fld="'false'"
      ref="treeTable"
    >
      <el-table-column label="类别" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.icon? "菜单权限":"功能权限"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.available? "已授权":"未授权"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id" align="center" width="300">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="showAdd(scope.row)"
            v-if="hasPermission('sys:perm:add')"
          >添加子菜单</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="updatePerm(scope.row)"
            v-if="hasPermission('sys:perm:edit')"
          >修改</el-button>
        </template>
      </el-table-column>
    </tree-table>
  </div>
</template>

<script>
import treeTable from "@/components/treeTable/permTree.vue";

import { getRolePerms } from "@/api/role";
import { getPermList, addSubPerm } from "@/api/perm";

export default {
  name: "treeTablePerm",
  components: {
    treeTable
  },
  mounted: function() {
    this.$nextTick(function() {
      this.tableHeight =
        window.innerHeight -
        this.$refs.treeTable.$el.offsetTop -
        document.getElementsByClassName("navbar")[0].parentNode.clientHeight;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.tableHeight =
          window.innerHeight -
          self.$refs.treeTable.$el.offsetTop -
          document.getElementsByClassName("navbar")[0].parentNode.clientHeight;
      };
    });
  },
  data() {
    return {
      dialogAddgsVisible: false,

      addForm: {
        available: 1,
        description: "",
        permission: "",
        parentId: "",
        parentName: "",
        icon: "",
        showOrder: ""
      },

      tableHeight: 500,
      expandAll: true,
      columns: [{ value: "permissionName", text: "菜单", minWidth: "300" }],
      permList: [
        {
          roleName: "超级管理员",
          role: "admin",
          permission: "root",
          permissionName: "根节点",
          icon: null,
          parentId: "0",
          permissionId: "1",
          roleId: 1,
          available: 1
        },
        {
          roleName: "超级管理员",
          role: "admin",
          permission: "dashboard",
          permissionName: "首页",
          icon: "dashboard",
          parentId: "1",
          permissionId: "2",
          roleId: 1,
          available: 1
        }
      ]
    };
  },
  created() {
    window.app = this;
    this.getList();
  },
  methods: {
    addPerm() {
      addSubPerm(this.addForm).then(response => {
        if(response.code == 200){
          window.location.reload()
        }
        console.log(response);
        this.dialogAddgsVisible = false;
      });
    },
    showAdd(row) {
      this.dialogAddgsVisible = true;
      this.addForm.parentName = row.description
        ? row.description
        : row.permissionName;
      this.addForm.parentId = row.id ? row.id : row.permissionId;
    },
    getChoosePerm() {
      let dataSet = {
        role: 1,
        list: []
      };
      this.permList.map(item => {
        if (item["false"]) {
          let perm = {
            permissionId: item.permissionId,
            roleId: dataSet.role
          };
          dataSet.list.push(perm);
        }
      });
      console.log(dataSet);
    },
    getList() {
      this.listLoading = true;
      getRolePerms({ role: "admin" }).then(response => {
        this.permList = response.data;
        // Just to simulate the time of the request
        this.permList.map(row => {
          if (row.available === 1) {
            this.$refs.treeTable.chooseNode(row);
          }
        });
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    }
  }
};
</script>

<style scoped>
</style>